<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <!-- v-model是vue.js中内置的双向数据绑定指令。只对表单控件标签的数据双向绑定有效 -->
        <!-- :model === v-bind:model 动态绑定指令。父组件的数据传递到了子组件-->
        <!-- el-form 的 model 属性是用来指定表单使用的数据的 -->
        <!-- el-from-item 的 prop 属性必须与 el-input 中需要校验的表单属性一致。 -->
        <!-- $refs是一个对象，持有已注册过 ref的所有的子组件。 -->
        <el-form :model="requestParameters" ref="requestParameters">
            <div >
                <el-form-item prop="title">
                    <!-- 搜索框 -->
                    <!-- 如果用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native -->
                    <el-input  @keyup.enter.native="handleFilter" v-model="requestParameters.title" placeholder="根据用户名搜索" size="small" style="width: 200px; margin-right: 10px;" ></el-input>
                    <el-button @click="resetForm" size="small">清除</el-button>
                    <el-button type="primary" @click="handleFilter" size="small">搜索</el-button>
                    <el-button @click="handleCreate" type="success" icon="el-icon-edit" style="margin-left: 10px;" size="small" class="fr">新增权限组</el-button>
                </el-form-item>
            </div>
        </el-form>
        <!--alert警告 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          show-icon
          :closable="false"
          >
          <!-- :closable="false"不可关闭的
                show-icon显示 Alert 的 icon
                type="info"主题
           -->
        </el-alert>
        <!--alert警告end -->
        <!-- 搜索end -->

        <!-- 数据 -->
        <!-- v-loading在接口未请求到数据之前，显示加载中，直到请求到数据后消失。 -->
        <el-table
          :data="dataList"
          v-loading="listLoading"
          style="width: 100% "

          >
          <!-- {{dataList}} -->
          <!-- 勾选框 -->
          <el-table-column
            type="selection"
            width="55px"
            fixed="left"
            >
          </el-table-column>
          <!-- 用户名 -->
          <el-table-column
            align="center"
            prop="title"
            label="用户名">
          </el-table-column>
          <!-- 日期 -->
          <el-table-column
            align="center"
            prop="create_date"
            label="日期"
            sortable>
            <!-- sortable排序 -->
            <template v-slot="{ row }">
                {{row.create_date|parseTimeByString("{y}-{m}-{d}")}}
            </template>
          </el-table-column>

          <!-- 操作 -->
          <el-table-column
            align="center"
            width="120px"
            fixed="right"
            label="操作"
            >
            <template slot-scope="scope">
                <!-- 编辑 -->
                <!-- plain高亮 -->
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                circle
                plain
                @click="handleUpdate(scope.row.id)"></el-button>
                <!-- 删除 -->
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click="removeUser(scope.row.id)"></el-button>
            </template>
          </el-table-column>
          <!-- 操作end -->
        </el-table>
        <!-- 数据end -->

        <!-- 分页 -->
        <div class="pagination ">
            <PageTool
               :paginationPage="requestParameters.page"
               :paginationPagesize="requestParameters.pagesize"
               :total="total"
               @pageChange="handleCurrentChange"
               @pageSizeChange="handleSizeChange"
               style="margin-top: 20px; text-align: right;"
            >
            </PageTool>
        </div>
        <!-- 分页end -->

        <!-- 标签弹层 -->
        <!-- ruleInline表单验证 -->
        <PermissionsAdd
        ref="editPermission"
        :text="text"
        :pageTitle="pageTitle"
        :formData.sync="requestParameters"
        :ruleInline="ruleInline"
        v-on:newDataes="getList"
        v-on:handleCloseModal="handleCloseModal"
        ></PermissionsAdd>
        <!-- 标签弹层end -->
      </el-card>
    </div>
  </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
// 警告
.alert {
  margin: 10px 0px;
}
// 分页
.pagination {
  margin-top: 10px;
  // text-align: right;
}
</style>
<style>
/* 新增权限组 */
/* .register_btn {
    position: fixed;
    right: 4%;
    top: 17%;
} */

.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
/* .el-form-item {
  margin-bottom: 0;
} */
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
</style>
<script>
import { list, remove } from '@/api/base/permissions'
import PageTool from './../components/page-tool'
import PermissionsAdd from './../components/permissions-add'
export default {
  name: 'base-permissions',
  components: {
    // 弹层
    PermissionsAdd,
    PageTool
  },
  data () {
    return {
      text: '', // 新增、编辑文本
      pageTitle: '权限组',
      dataList: [],
      total: null,
      listLoading: true,
      alertText: '',
      // requestParameters请求参数集，携带page=1&pagesize=10
      requestParameters: {
        page: 1,
        pagesize: 10,
        title: this.title
      },
      ruleInline: {
        // 表单验证
        title: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getList() // 获取列表数据
    // this.removeUser() // 删除
  },
  methods: {
    // 获取列表数据
    // params参数
    async getList () {
      this.listLoading = true // 请求数据前显示加载
      const { data } = await list(this.requestParameters)
      try {
        this.dataList = data.list
        this.total = data.counts
        this.alertText = `共 ${this.total} 条记录`
        this.listLoading = false
      } catch (e) {
        this.$message.e('错了哦，这是一条错误消息')
      }
    },
    // 搜索
    handleFilter () {
      this.requestParameters.page = 1
      this.getList(this.requestParameters)
    },
    // 重置
    resetForm () {
      this.$refs.requestParameters.resetFields()
      this.getList(this.requestParameters)
    },
    // 新增
    handleCreate () {
      this.text = '新增'
      this.$refs.editPermission.handleResetForm() // 表单重置
      this.$refs.editPermission.dialogFormV() // 弹层显示
    },
    // 弹框关闭
    handleCloseModal () {
      this.$refs.editPermission.dialogFormH()
    },
    // 编辑
    handleUpdate (objeditId) {
      this.text = '编辑'
      this.$refs.editPermission.dialogFormV()
      this.$refs.editPermission.hanldeEditForm(objeditId)
    },
    // 删除
    async removeUser (user) {
      //  提示
      try {
        await this.$confirm('此操作将永久删除用户 , 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 只有点击了确定 才能进入到下方
        await remove({ id: user }) // 调用删除接口
        const totalPage = Math.ceil((this.total - 1) / this.requestParameters.pagesize)
        if (this.requestParameters.page > totalPage) {
          this.requestParameters.page = totalPage
        }
        this.getList() // 重新加载数据
        this.$message.success('删除角色成功')
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 分页
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getList()
    }
  }
}
</script>
